<template>
	<up-popup
		:show="showPop"
		:round="15"
		@close="closePopFun"
		safeAreaInsetBottom
		closeOnClickOverlay>
		<view class="pop-content">
			<up-text
				:text="t('report.changeDevice')"
				align="center"
				color="rgba(0, 0, 0, 0.9)"
				size="16"></up-text>
			<scroll-view class="list-scroll" scroll-y :show-scrollbar="true">
				<view class="list">
					<view
						class="list-item"
						v-for="(item, index) in props.deviceList"
						:key="`item-${index}`">
						<up-text
							:text="item.name || item.device_sn"
							color="rgba(0, 0, 0, 0.9)"
							lineHeight="53"
							size="14"></up-text>
						<up-tag
							@click="conformChange(item)"
							:text="
								item.device_sn === defaultDevice.device_sn
									? t('report.atPresent')
									: t('report.view')
							"
							:bgColor="
								item.device_sn === defaultDevice.device_sn
									? '#9facb5'
									: '#000'
							"></up-tag>
					</view>
				</view>
			</scroll-view>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type * as type from "../type";
import { useI18n } from "vue-i18n";
// 国际化
const { locale, t } = useI18n();
const props = defineProps<{
	defaultDevice: type.DeviceItem;
	deviceList: type.DeviceItem[];
}>();
const showPop = ref(true);
const emit = defineEmits(["changeDev", "closePop"]);
const closePopFun = () => {
	emit("closePop");
};
const conformChange = (device: type.DeviceItem) => {
	emit("changeDev", device);
};
</script>

<style lang="scss" scoped>
.pop-content {
	padding: 15px;
	.list-scroll {
		max-height: 60vh;
	}
	.list {
		padding-top: 20rpx;
		.list-item {
			display: flex;
			padding: 15px 10px;
			background: #f0f0f1;
			margin-top: 10px;
			font-size: 14px;
			justify-content: space-between;
			align-items: center;
		}
		:deep(.u-tag__text--medium) {
			font-size: 14px;
			line-height: 26px;
		}
		:deep(.u-tag--primary) {
			border: 0;
			padding: 6rpx 50rpx;
		}
	}
}
</style>
